<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="150"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button size="small" type="danger" @click.prevent="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { UserListApi, UserDeleApi } from '@/api/home.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([]);
const getListDats = async () => {
  const res = await UserListApi();
  // 设置到页面上
  list.value = res.data
}
onMounted(() => {
  getListDats();
})

let deleteRow = (rowData) => {
  console.log(rowData);
  ElMessageBox.confirm(
    '您要删除吗?',
    '重要提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      UserDeleApi(rowData).then(res => {
        console.log();
        if (res.data.success) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          // 再次请求list数据
          getListDats();
        } else {
          ElMessage({
            type: 'warning',
            message: '删除失败',
          })
        }

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })

}
</script>
<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>